<script lang="ts" setup>
import { reactive, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';

import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElMessage,
  ElOption,
  ElSelect,
} from 'element-plus';

import { saveDramaShareApi, searchDramaPreviewApi } from '#/api';

import ExtraDrawer from './preview.vue';

const extraModalRef = ref();

const confirmMark = ref(true);

const id = ref(0);
const sid = ref(0);
const name = ref('');
const sname = ref('');
const externalApi = ref();

const [Modal, modalApi] = useVbenModal({
  showConfirmButton: false,
  showCancelButton: false,
  draggable: true,
  closeOnClickModal: false,
  onOpenChange(isOpen) {
    if (isOpen) {
      id.value = isOpen ? modalApi.getData().id : 0;
      sid.value = isOpen ? modalApi.getData().sid : 0;
      name.value = isOpen ? modalApi.getData().name : '';
      sname.value = isOpen ? modalApi.getData().sname : '';
      externalApi.value = isOpen ? modalApi.getData()?.externalApi : null;
      confirmMark.value = true;
    }
  },
});
defineExpose(modalApi);

const formInline = reactive({
  dramaName: name,
  dramaId: id,
  seasonId: sid,
  seasonName: sname,
  cloudType: 'quarkpan',
  videoResolution: 'no',
  videoType: 'no',
  shareStatus: 'updated',
  resourceLink:
    'https://pan.quark.cn/s/1e2c9963417c#/list/share/be3c67d6cdca4c57b19dfd219f54dd0a-%E4%BB%8E%E5%9C%B0%E7%8B%B1%E6%9D%A5%E7%9A%84%E6%B3%95%E5%AE%98',
  reConfig: String.raw`(\d+)(?=\.mkv)`,
  resourceCode: '82u2',
  lastCount: 0,
  lastName: '',
});

const confirmData = async () => {
  await saveDramaShareApi(formInline);
  // console.log(dramaPreview);
  // console.log(formInline);
  ElMessage({
    message: $t('subscribe.drama.share.addTips'),
    type: 'success',
  });
  externalApi.value?.initDramaResourceList();
  formInline.cloudType = 'quarkpan';
  formInline.videoResolution = 'no';
  formInline.videoType = 'no';
  formInline.shareStatus = 'updated';
  formInline.resourceLink = '';
  formInline.reConfig = '';
  formInline.resourceCode = '';
  confirmMark.value = true;
  modalApi.close();
};

const cancelData = () => {
  modalApi.close();
};

const previewData = async () => {
  confirmMark.value = true;
  const dramaPreview = await searchDramaPreviewApi(formInline);
  confirmMark.value = false;
  // console.log(dramaPreview);
  formInline.lastCount = dramaPreview.lastCount;
  formInline.lastName = dramaPreview.lastName;
  extraModalRef.value.setData(dramaPreview);
  extraModalRef.value.open();
};

const changeData = () => {
  confirmMark.value = true;
};
</script>

<template>
  <Modal :title="$t('subscribe.drama.share.add')" class="w-[720px]">
    <div class="form-style">
      <ElForm :inline="true" class="form-inline" label-position="left">
        <ElFormItem
          :label="$t('subscribe.drama.share.DramaNo')"
          label-position=""
        >
          <ElInput
            v-model="formInline.dramaId"
            clearable
            disabled
            readonly
            style="pointer-events: none"
          />
        </ElFormItem>
        <ElFormItem
          :label="$t('subscribe.drama.share.SeasonNo')"
          label-position=""
        >
          <ElInput
            v-model="formInline.seasonId"
            clearable
            disabled
            readonly
            style="pointer-events: none"
          />
        </ElFormItem>

        <ElFormItem
          :label="$t('subscribe.drama.share.cloudType')"
          label-position=""
        >
          <ElSelect v-model="formInline.cloudType" @change="changeData">
            <ElOption
              :label="$t('subscribe.drama.share.quarkpan')"
              value="quarkpan"
            />
            <ElOption
              :label="$t('subscribe.drama.share.alipan')"
              value="alipan"
            />
          </ElSelect>
        </ElFormItem>

        <ElFormItem
          :label="$t('subscribe.drama.share.videoType')"
          label-position=""
        >
          <ElSelect v-model="formInline.videoType" @change="changeData">
            <ElOption
              :label="$t('subscribe.drama.share.unlimited')"
              value="no"
            />
            <ElOption label="mkv" value="mkv" />
            <ElOption label="mp4" value="mp4" />
          </ElSelect>
        </ElFormItem>

        <ElFormItem
          :label="$t('subscribe.drama.share.shareStatus')"
          label-position=""
        >
          <ElSelect v-model="formInline.shareStatus" @change="changeData">
            <ElOption
              :label="$t('subscribe.drama.share.updated')"
              value="updated"
            />
            <ElOption
              :label="$t('subscribe.drama.share.completed')"
              value="completed"
            />
          </ElSelect>
        </ElFormItem>

        <ElFormItem
          :label="$t('subscribe.drama.share.videoResolution')"
          label-position=""
        >
          <ElSelect v-model="formInline.videoResolution" @change="changeData">
            <ElOption
              :label="$t('subscribe.drama.share.unlimited')"
              value="no"
            />
            <ElOption label="320x480" value="320x480" />
            <ElOption label="640x480" value="640x480" />
            <ElOption label="960x540" value="960x540" />
            <ElOption label="1280x720" value="1280x720" />
            <ElOption label="1920x1080" value="1920x1080" />
            <ElOption label="2560x1440" value="2560x1440" />
            <ElOption label="3840x2160" value="3840x2160" />
            <ElOption label="7680x4320" value="7680x4320" />
          </ElSelect>
        </ElFormItem>

        <ElFormItem
          :label="$t('subscribe.drama.share.reConfig')"
          label-position=""
        >
          <ElInput
            v-model="formInline.reConfig"
            clearable
            @change="changeData"
          />
        </ElFormItem>

        <ElFormItem
          :label="$t('subscribe.drama.share.resourceCode')"
          label-position=""
        >
          <ElInput
            v-model="formInline.resourceCode"
            clearable
            @change="changeData"
          />
        </ElFormItem>
      </ElForm>
      <ElForm :inline="false" class="form-inline2" label-position="left">
        <ElFormItem
          :label="$t('subscribe.drama.share.resourceLink')"
          label-position=""
        >
          <ElInput
            v-model="formInline.resourceLink"
            clearable
            @change="changeData"
          />
        </ElFormItem>
      </ElForm>
    </div>
    <template #prepend-footer>
      <ElButton bg text type="info" @click="cancelData">
        {{ $t('subscribe.drama.share.cancel') }}
      </ElButton>
      <ElButton bg text type="warning" @click="previewData">
        {{ $t('subscribe.drama.share.preview') }}
      </ElButton>
      <ElButton
        :disabled="confirmMark"
        bg
        text
        type="primary"
        @click="confirmData"
      >
        {{ $t('subscribe.drama.share.confirm') }}
      </ElButton>
    </template>
    <ExtraDrawer ref="extraModalRef" />
  </Modal>
</template>

<style lang="css" scoped>
.form-inline .el-input {
  --el-input-width: 220px;
}

.form-inline .el-select {
  --el-select-width: 220px;
}

.form-inline2 .el-input {
  --el-input-width: 90%;
}

.form-style {
  align-items: center;
  margin-right: 1%;
  margin-left: 6%;
}
</style>
